<script setup lang='ts'>
import { reactive } from "vue"
import { useRouter } from "vue-router"
import { ElMessage } from 'element-plus'

const router = useRouter();

const form = reactive({
    keyword: ''
})

// 搜索操作
const searching = () => {
    if (form.keyword.length !== 0) {
        router.push(`/result?cert=${form.keyword}`)
    } else {
        ElMessage.error('请输入需要查询的身份证号码')
    }
    // router.push(`/result`)
}

// 登录
const login = () => {
    router.replace("/login");
}
</script>
<template>
    <div class="container">
        <img src="@/assets/header.png" class="img-title">
        <el-button type="text" class="login-button" @click="login">后台登录</el-button>
        <el-card class="main-card" header="江苏省中医医师规范化培训结业技能考核-准考证打印">
            <el-form-item label="身份证号码" required :model="form">
                <el-input v-model="form.keyword" placeholder="请输入身份证号码查询"></el-input>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searching" round style="width: 100%;margin-top: 12px;">查询</el-button>
        </el-card>
    </div>
</template>

<style scoped>
.main-card {
    width: 40%;
    height: 36%;
    position: absolute;
    left: 30%;
    top: 32%;
}

.container {
    width: 100vw;
    height: 100vh;
    background: url("@/assets/back.jpg") no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

.img-title {
    margin: 6px;
    width: 440px;
    height: 100px;
}

.login-button {
    position: absolute;
    right: 24px;
    top: 6px;
}
</style>